<template>
    <div>
         <div>
            <!-- 搜索表单区域 -->
            <common-form ref="searchRightFormRef" inline :form="searchForm" :formLabel="searchFormLabel" :lableWidth="lableWidth">
                <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
                <el-button  icon="el-icon-refresh" size="mini">重置</el-button>
            </common-form>

            <div >
                 <!-- 导出 excel 表格 -->
                <el-popover
                  placement="top"
                  width="200"
                  >
                  <p style="font-size:13px;"><i class="el-icon-s-opportunity" style="color: green;"></i> 请选择你所需要导出的类型！</p>
                  <div style="text-align: right; margin: 0">
                      <export-excel Type="info" :excelData="allSelection" :excelTitle="excelTitle" :excelHeader="excelHeader" :excelVal="excelVal">全部</export-excel>
                      <export-excel Type="success" :excelData="multipleSelection" :excelTitle="excelTitle" :excelHeader="excelHeader" :excelVal="excelVal">选中项</export-excel>
                  </div>
                  <el-button slot="reference" type="warning" size="mini" icon="el-icon-s-data" @click="exlAll()">EXCEL</el-button>
                </el-popover>
            </div>
            <common-table
              :tableData="rightTable" :tableLabel="rightTableLabel" :config="config"
              >
            </common-table>
        </div>
    </div>
</template>

<script>
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
import ExportExcel from '../../components/ExportExcel'
export default {
  components: {
    CommonForm,
    CommonTable,
    ExportExcel
  },
  data () {
    return {
      // 表单字段宽度
      lableWidth: '80',
      // 搜索表单
      searchForm: {
        name: '', // 角色名
        status: '',
        date: ''
      },
      // 搜索表单label
      searchFormLabel: [
        {
          model: 'name',
          label: '权限名称',
          type: 'input'
        },
        {
          model: 'status',
          label: '状态',
          type: 'select',
          opts: [
            {
              value: '',
              label: '全部'
            },
            {
              value: 1,
              label: '可用'
            },
            {
              value: 0,
              label: '禁用'
            }
          ]
        },
        {
          model: 'date',
          label: '时间',
          type: 'date'
        }
      ],
      // 权限数据
      rightTable: [],
      // 权限数据label
      rightTableLabel: [
        {
          prop: 'permissionName',
          label: '权限名称',
          type: ''
        },
        {
          prop: 'description',
          label: '权限描述',
          type: ''
        },
        {
          prop: 'url',
          label: '权限Url',
          type: ''
        },
        {
          prop: 'status',
          label: '状态',
          type: 'switch'
        },
        {
          prop: 'createTime',
          label: '创建日期'
        },
        {
          prop: 'updateTime',
          label: '修改日期'
        }
      ],
      // table配置对象
      config: {
        loading: false,
        current: 0,
        size: 0,
        total: 0,
        btn: [
          {
            type: ''
          },
          {
            type: 'edit'
          },
          {
            type: 'delete'
          }
        ]
      },
      // 选中表格数据返回数组
      multipleSelection: [],
      // 导出表格的所有数据缓存
      allSelection: [],
      // 自定义导出 excel 表头
      excelHeader: ['用户名', '密码', '年龄', '性别', '邮箱', '电话', '账号状态', '注册日期', '更改日期'],
      // 自定义导出 excel 字段
      excelVal: ['username', 'password', 'age', 'sexLabel', 'email', 'phone', 'statusLabel', 'createTime', 'updateTime'],
      // 自定义导出 excel 文件名
      excelTitle: '用户列表'
    }
  },
  methods: {
    // 获取权限列表
    async getRightList () {
      this.loading = true
      const { data: res } = await this.$http.get('/permission/all')
      console.log('权限列表', res)
      if (res.code !== 200) {
        this.loading = false
        return this.$message.error('获取权限列表失败！')
      }
      this.rightTable = res.data.map(item => {
        if (item.deleted === 0) {
          item.status = true
        } else {
          item.status = false
        }
        return item
      })
      this.config.total = this.rightTable.length
      this.loading = false
    }
  },
  created () {
    this.getRightList()
  }
}
</script>

<style lang="scss" scoped>

</style>
